<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram: Refraction in a Sphere</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="450"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Define geometric parameters based on canvas size
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const radius = 160;

    // Set drawing styles
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;

    // 1. Draw the main circle for the sphere
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
    ctx.stroke();

    // 2. Draw the tick marks on the outside of the sphere
    // These indicate the surface is coated/opaque
    const tickLength = 10;
    const numTicks = 90;
    ctx.lineWidth = 1.5; // Ticks can be slightly thinner
    for (let i = 0; i < numTicks; i++) {
        const angle = (2 * Math.PI * i) / numTicks;
        const startX = centerX + radius * Math.cos(angle);
        const startY = centerY + radius * Math.sin(angle);
        const endX = centerX + (radius + tickLength) * Math.cos(angle);
        const endY = centerY + (radius + tickLength) * Math.sin(angle);
        
        ctx.beginPath();
        ctx.moveTo(startX, startY);
        ctx.lineTo(endX, endY);
        ctx.stroke();
    }
    ctx.lineWidth = 2; // Reset line width

    // 3. Draw the dashed horizontal diameter AB
    ctx.save(); // Save current state
    ctx.setLineDash([7, 5]); // Set a dashed line pattern
    ctx.beginPath();
    ctx.moveTo(centerX - radius, centerY);
    ctx.lineTo(centerX + radius, centerY);
    ctx.stroke();
    ctx.restore(); // Restore to solid line

    // 4. Draw the small points at A and B on the circle's edge
    const pointRadius = 2.5;
    // Point A
    ctx.beginPath();
    ctx.arc(centerX - radius, centerY, pointRadius, 0, 2 * Math.PI);
    ctx.fill();
    // Point B
    ctx.beginPath();
    ctx.arc(centerX + radius, centerY, pointRadius, 0, 2 * Math.PI);
    ctx.fill();

    // 5. Draw the diamond-shaped mark at the center of the sphere
    const diamondSize = 4.5;
    ctx.beginPath();
    ctx.moveTo(centerX, centerY - diamondSize);
    ctx.lineTo(centerX + diamondSize, centerY);
    ctx.lineTo(centerX, centerY + diamondSize);
    ctx.lineTo(centerX - diamondSize, centerY);
    ctx.closePath();
    ctx.fill();

    // 6. Add the labels A, B, and R
    const labelFontSize = 28;
    ctx.font = `italic ${labelFontSize}px serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Label A (to the left of the circle)
    ctx.fillText('A', centerX - radius - 25, centerY + 5);

    // Label B (to the right of the circle)
    ctx.fillText('B', centerX + radius + 25, centerY + 5);

    // Label R (above the left radius)
    ctx.fillText('R', centerX - radius / 1.8, centerY - 30);

</script>
</body>
</html>